<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>电商后台管理</title>

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

  <link rel="stylesheet" href="/stylesheets/font-awesome.min.css">

  <link rel="stylesheet" href="/stylesheets/ionicons.min.css">

  <link rel="stylesheet" href="/stylesheets/AdminLTE.min.css">

  <link rel="stylesheet" href="/stylesheets/skin-blue.min.css">


</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">


  <!-- header -->
  <%- include("./header.ejs") %>

  <!-- 侧边导航栏 -->
  <%- include("./sidbar.ejs") %>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        banner管理
        <small>Optional description</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">添加banner信息</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="tit">图片标题</label>
              <input type="text" class="form-control" id="tit" placeholder="请输入图片标题">
            </div>
            <div class="form-group">
              <label for="alt">图片描述</label>
              <input type="text" class="form-control" id="alt" placeholder="请输入图片描述">
            </div>
            <div class="form-group">
              <label for="imgFile">选择图片</label>
              <input type="file" id="imgFile">
            </div>
          </div>
          <!-- /.box-body -->

          <div class="box-footer">
            <button onclick="on()" class="btn btn-primary">提交</button>
          </div>
        </form>
      </div>

      <div class="box">
        <div class="box-header">
          <h3 class="box-title">查看轮播图</h3>

          <div class="box-tools">

          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body no-padding">
          <table class="table">
            <tbody>
              <tr>
                <th style="width: 80px">序号</th>
                <th style="width: 300px; text-align: center;">图片信息</th>
                <th>图片描述</th>
                <th style="width: 600px">图片</th>
                <th style="width: 150px;text-align: center;">操作</th>
              </tr>
              <% for(var i=0;i<data.length;i++){ %>
              <tr>
                <td><%= i+1 %></td>
                <td><%= data[i].tit %></td>
                <td><%= data[i].alt %></td>
                <td><img width="400px" src="<%= data[i].img %>" alt=""></td>
                <td style="text-align: center;">
                  <a href="/banner/delete?id=<%= data[i].bannerId %>" class="btn btn-danger btn-sm">删除</a>
                </td>
              </tr>
              <% } %>
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>


    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
  <%- include("./footer.ejs") %>

  
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>

<script>
  function on() {
    var reader = new FileReader();
    reader.readAsDataURL($("#imgFile")[0].files[0]);
    reader.onload = function () {
      $.ajax({
        url: "http://localhost:3000/banner/add",
        type: "post",
        data: {
          tit: $("#tit").val(),
          alt: $("#alt").val(),
          img: reader.result
        },
        success: () => {
          location.href="http://localhost:3000/banner"
        }
      })

    }
  }
</script>
</body>
</html>